<template>
  <h6 style="color: crimson">商品与赠品管理--><a href="http://localhost:5173/gift">赠品管理</a>-->添加赠品</h6>
  <el-table
      :data="tableList.tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
  >
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="giftName" label="赠品名称" width="180" />
    <el-table-column prop="giftType" label="赠品类型" width="180" />
    <el-table-column prop="minStock" label="最低库存" width="180" />
    <el-table-column prop="marketPrice" label="赠品单价" width="180" />
    <el-table-column prop="purchasePrice" label="采购成本" width="180" />
    <el-table-column  label="操作" >
      <template #default="scope">
        <el-button type="success" size="small" @click="chooseRow(scope.$index, scope.row)">选择</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
        :page-sizes="[2, 5, 10, 50]"
        layout="total, sizes, prev, pager, next"
        :total="tableList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

  <el-dialog
      v-model="updateDialogVisible"
      title="添加赠品审核"
      width="500"
  >
    <el-form ref="updateFormRef"  :model="updateForm.updateData" label-width="90" >
      赠品名称:  <br>{{giftDetail.gname}}
      <hr> 赠品类型:  <br>{{giftDetail.gtype}}
      <hr> 赠品型号:  <br>{{giftDetail.gmodel}}
      <hr> 赠品单价:  <br>{{giftDetail.marketPrice}}
      <hr> 赠品颜色:  <br>{{giftDetail.gcolor}}
      <hr> 赠品品牌:  <br>{{giftDetail.gbrand}}
      <hr> 赠品数量:  <br>{{giftDetail.giftNUm}}

      <hr>
      <el-form-item label="输入入库数" prop="num" >
        <el-input v-model="updateForm.updateData.num" placeholder="oldPassword" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="updateSubmit">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script  setup>
import {ref,reactive,onMounted,getCurrentInstance} from "vue";
import axios from "@/plugins/axios.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {giftStore} from "@/stores/GiftModel.js";
const giftModel = giftStore()

const giftDetail =ref({
  gname: "",
  gtype: "",
  gmodel: "",
  marketPrice: "",
  purchasePrice: "",
  minStock: "",
  gcolor: "",
  gbrand: "",
  giftNUm:0
})

const updateForm =reactive( {updateData:{num:0}})
const updateDialogVisible=ref(false)

const chooseRow = (index, row) => {
  updateDialogVisible.value = true
  const id=row.id
  axios.get("/gift/getGiftDetail/"+id).then((res) => {
    if (res.code === 200){
      giftDetail.value=res.data;

      axios.get("/gift2goods/getGiftNum/"+id).then( res=>{
        console.log(res.data.giftNum)
        giftDetail.value.giftNUm=res.data.giftNum
      })

    }
  });

};
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex%2 === 1) {
    return 'warning-row';
  } else{
    return 'success-row';
  }
  return '';
};

const tableList =reactive({tableData:[],total:10})
const handleSizeChange = (val) => {
  const queryForm = ref({
    gmodel:null,
    giftName:null,
    gtype:null,
    gbrand:null,
    gcolor:null,
    pageSize:10,
    pageNum:0
  });
  queryForm.value.pageSize=val
  axios.postJson("/gift/ListByParams",queryForm.value).then( res=>{
    tableList.tableData=res.data
  })
};
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  queryForm.value.pageNum=(val-1)*queryForm.value.pageSize
  axios.postJson("/gift/ListByParams",queryForm.value).then( res=>{
    tableList.tableData=res.data
    console.log(res.data)
  })
};

onMounted(()=>{
  axios.get("gift/listGifts").then(res=>{
    if(res.code===200){
      tableList.tableData=res.data
    }
  })

  axios.get("/gift/getTatol").then( res=>{
    tableList.total=res.data
  })
    }
)
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>